<template>
  <a-modal v-model:visible="modalConfig.visible" :bodyStyle="{ padding: 0, height: modalConfig.maxHeight + 'px' || '500px' }" :width="modalConfig.width || 800" :zIndex="modalConfig.zIndex || 1000" :okText="modalConfig.okText" :cancelText="modalConfig.cancelText" :confirmLoading="modalConfig.confirmLoading" :keyboard="modalConfig.keyboard" :mask="modalConfig.mask" :wrapClassName="modalConfig.wrapClassName" :maskClosable="modalConfig.maskClosable" :okType="modalConfig.okType" :closable="modalConfig.closable" @ok="handleOk" @cancel="_emits('handleModalClose', false)">
    <slot name="modalContent"></slot>
    <template #title>
      <div ref="modalTitleRef" style="width: 100%; cursor: move">{{ modalConfig.title }}</div>
    </template>
    <template #modalRender="{ originVNode }">
      <div :style="transformStyle">
        <component :is="originVNode" />
      </div>
    </template>

    <!-- 自定义Footer -->
    <template #footer v-if="modalConfig.footer">
      <slot name="footer"></slot>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import useModalDrag from '@/hooks/useModalDrag'
import type { IModalOptions } from '@/types/interface/modalOption'
interface IProps {
  modalOptions: {
    data: IModalOptions
  }
}
interface IEmits {
  (e: 'handleModalClose', is: boolean): void
}
const _props = withDefaults(defineProps<IProps>(), {
  modalOptions: () => ({
    data: {
      visible: false,
      width: 800,
      title: '标题',
      footer: false,
    },
  }),
})
const _emits = defineEmits<IEmits>()
const modalTitleRef = ref<HTMLElement>()

const modalConfig = ref<IModalOptions>({
  visible: false,
  width: 800,
  title: '弹窗标题',
  footer: false,
})

const { transformStyle } = useModalDrag(modalTitleRef)

/**
 * @method 点击确定按钮
 */
const handleOk = () => {
  modalConfig.value.confirmLoading = true
  _emits('handleModalClose', true)
}
watch(
  () => _props.modalOptions,
  (now) => {
    modalConfig.value = now.data
  },
  { deep: true, immediate: true },
)
</script>

<style scoped lang="less">
:deep(.ant-modal-header) {
  cursor: all-scroll !important;
}
</style>
